<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文件</title>
    <script src="js/jquery/jquery-3.4.1.min.js"></script>
</head>
<style>
    .header{
        width: 100%;
        height: 80px;
        background-color: lightskyblue;
        background-size: cover;
    }

    .title{
        color: white;
        float: left;
        margin-left: 20px;
    }

    .header:after .content:after{
        clear: both;
    }

    /* 下拉按钮样式 */
    .dropbtn {
        background-color: rgba(224, 222, 222, 0.6);
        color: black;
        padding: 16px;
        border: none;
        font-size: 16px;
        cursor: pointer;
        border-radius: 2px;
        width: 159px;
    }


    .dropdown {
        position: relative;
        display: inline-block;
        left: 67%;
        margin-top: 10px;
    }

    /* 下拉内容*/
    .dropdown-content {
        /* 默认隐藏*/
        display: none;
        position: absolute;
        z-index: 100;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    /* 下拉菜单的链接 */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    /* 鼠标移上去后修改下拉菜单链接颜色 */
    .dropdown-content a:hover {background-color: #f1f1f1}

    /* 在鼠标移上去后显示下拉菜单 */
    .dropdown:hover .dropdown-content {
        display: block;
    }

    /* 下拉内容显示时下拉按钮的颜色需要改变*/
    .dropdown:hover .dropbtn {
        background-color: #82bbee;
    }

    form{
        width: 85%;
        margin: 2% auto auto;
    }
    .table{
        border-spacing: 0;
        border-collapse: collapse;
        width: 100%;
        max-width: 100%;
        display: table;
        border: 1px solid #cbc7c7;
    }

    tr{
        border: 1px solid #cbc7c7;
        line-height: 40px;
    }

    tr:first-child{
        background-color: #c5c0c0;
    }

    tr td:first-child{
        width: 9%;
    }

    tr td:nth-child(2){
        width: 75%;
    }

    th,td{
        text-align: left;
    }
</style>
<body>
<div class="main">
    <div class="header">
        <h2 class="title">快速创建收件夹</h2>
        <div class="dropdown">
            <button class="dropbtn">个人中心</button>
            <div class="dropdown-content">
                <a href="/index">返回主页</a>
                <a href="/to_change_password">修改密码</a>
                <a href="/exit">退出登录</a>
            </div>
        </div>
    </div>
    <form action="" method="post">
        <table class="table">
            <tr>
                <th></th>
                <th>文件名称</th>
                <th>文件大小</th>
            </tr>
            <tr th:each="file,UserStat:${folderFileView.fileList}">
                <td><input type="checkbox" name="files" th:id="${file.fileName}"></td>
                <td><a th:utext="${file.fileName}" th:href="'/previewFile?fsids='+${file.fsids}+'&folder_key='+${folderFileView.folderKey}+'&file_name='+${file.fileName}" style="text-decoration: none;color: black;cursor: pointer"></a></td>
                <td th:utext="${file.size}/1024+'kb'"></td>
            </tr>

            <tr>
                <td><input type="checkbox" id="all">全选</td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <input type="button" value="删除选中项" onclick="delete1()"
               style="background-color: darkred;cursor: pointer;font-size: 20px;
               margin-top: 10px;color: #333232;border: none">
    </form>
</div>
</body>
<script>
    function delete1() {
        var l = []
        $("input[name='files']").each(function () {
            if($(this.checked)[0] == true){
                l.push($(this)[0].id)
            }
        })
        var s = JSON.stringify(l)
        $.ajax({
            url:"/delete_files",
            data:{
                fileName:s,
                folder_key:getQueryString("folder_key")
            },
            success(res){
                if(res['res']=='suc'){
                    alert("删除成功")
                    location.reload()
                }else{
                    alert("删除失败")
                }
            },error(e){
                alert("网络出错，请重试")
                location.reload()
            }
        })
    }

    $(function () {
        $('#all').click(function () {
            let all = document.getElementById("all")
            let checked = all.checked;
            let controls = document.getElementsByTagName("input")
            for (let obj of controls){
                if (obj.type == "checkbox"){
                    obj.checked = checked
                }
            }
        })
    })
    function getQueryString(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURIComponent(r[2]);
        }
        return "";
    }
</script>
</html>